<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Google Maps JavaScript API v3 Example: Map Simple</title>

<style type="text/css">
#map_canvas {
    margin: 0;
    padding: 0;
    width: 60%;
    height: 500px;
}
</style>
</head>
<body>
  <div id="map_canvas"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../script/libs/jquery-1.7.1.js"><\/script>')</script>
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=zh-CN"></script>
  <script type="text/javascript">
    var map = null;
    var geocoder = null;
    var defaultAddress = 'China';
    var circles = [];
    var cityMarkers = [];

    function initialize() {
        var myOptions = {
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        geocoder = new google.maps.Geocoder();
    }

    function codeAddress(address) {
        geocoder.geocode({address: address}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location); // center

                // add a marker
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function markCity(city) {
        var color = city.hasStore ? 'red' : 'green';
        var radius = city.userAmount;

        geocoder.geocode({address: city.name}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                // add a marker
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
                cityMarkers.push(marker);

                var circleOptions = {
                    strokeColor: color,
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: color,
                    fillOpacity: 0.35,
                    map: map,
                    center: results[0].geometry.location,
                    radius: radius
                };

                // add a circle
                var cityCircle = new google.maps.Circle(circleOptions);
                circles.push(cityCircle);

                google.maps.event.addListener(cityCircle, 'click', function() {
                    map.setZoom(12);
                    map.setCenter(results[0].geometry.location);
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function showPosition(position) {
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        var infowindow = new google.maps.InfoWindow({
            map: map,
            position: pos,
            content: 'Location found using HTML5.'
        });

        map.setCenter(pos);
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
        } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
            map: map,
            position: new google.maps.LatLng(60, 105),
            content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
    }

    function showCityMarkers() {
        jQuery.each(circles, function(index, circle) {
            circle.setMap(map);
        });

        jQuery.each(cityMarkers, function(index, marker) {
            marker.setMap(map);
        });
    }

    function hideCityMarkers() {
        jQuery.each(circles, function(index, circle) {
            circle.setMap(null);
        });

        jQuery.each(cityMarkers, function(index, marker) {
            marker.setMap(null);
        });
    }

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            codeAddress(defaultAddress);
            //showPosition(position);
            markCity({name: 'Beijing', hasStore: true, userAmount: 200000});
            markCity({name: 'Shanghai', hasStore: true, userAmount: 300000});
            markCity({name: 'Chengdu', hasStore: false, userAmount: 150000});

            google.maps.event.addListener(map, 'zoom_changed', function() {
                var zoomLevel = map.getZoom();
                if (zoomLevel > 6) {
                    hideCityMarkers();
                } else {
                    showCityMarkers();
                }
            });
        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>
</html>
